<template>
  <div>
      <h1 ref="changeh">项目中未用到的vue知识点</h1>
      <button @click="fun()">点击改变</button>
      <input type="text" v-model="text">
      <p>{{text}}</p>
      <Fu class="fu">这是测试slot的数据</Fu>
      <Quanju/>
  </div>
</template>

<script>
import Fu from '../components/others/fu.vue'
export default {
    components:{
        Fu
    },
    methods:{
        fun(){
            this.$refs.changeh.style.backgroundColor="red"
        }
    },
    data(){
        return {
            text:"这是测试watch的地方"
        }
    },
    watch:{
        text(newval,oldval){
            console.log(newval+"..........."+oldval)
        }
    }
}
</script>

<style scoped>
h1{
    font-size:0.2rem
}
button{
    font-size:0.2rem
}
p{
    font-size:0.18rem
}
input{
    width:3rem;
    height:0.3rem;
    font-size:0.18rem
}
.fu{
    font-size:0.18rem
}
</style>